<template>
  <div class="main">

    <van-tabs  @click="selectOrder" swipeable v-model="active" color="#01bf47">
      <van-tab class="van-tab--active" title="待支付"></van-tab>
      <van-tab title="待使用"></van-tab>
      <van-tab title="取消单"></van-tab>
      <van-tab title="待评价"></van-tab>
    </van-tabs>
    <div class="my_con">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list   v-model="loading"
                  :finished="finished"
                  :finished-text="text"
                  @load="onLoad"
                  :offset="100"
                  :immediate-check="false"
                 >
        <div class="list">
          <ul v-if="dataList.list && dataList.list.length>0">
            <li
              v-for="(item,index) in dataList.list"
              :key="index"
            >
              <div class="recordDetails_con_head">
                <img :src="item.logo_url"/>
                <p class="recordDetails_con_head_span">{{item.shopName}}</p>
                <div>
                  <van-icon name="arrow" />
                </div>
              </div>
              <div class="recordDetails_con_con" @click="toFarmIndex(item.orderDetailId)">
                <div class="recordDetails_con_con_img">
                  <img :src="item.product_image_url"/>
                </div>

                <div class="recordDetails_con_con_title">
                  <p>{{item.product_name}}</p>
                  <span>￥{{item.price}}</span>
                  <span>x{{item.quantity}}</span>
                </div>
              </div>
              <div class="recordDetails_con_foot">
                <p>订单状态：
                  <!--<span> {{item.shippingState}}</span>-->
                  <!--<span v-if="item.payment_state==0">支付失败</span>-->
                  <!--<span v-if="item.payment_state==1">支付成功</span>-->
                  <span v-if="item.shipping_state==0">待支付</span>
                  <span v-if="item.shipping_state==8">退款申请中</span>
                  <span v-if="item.shipping_state==7">退款成功</span>
                  <!--<span v-if="item.payment_state==5">退款失效</span>-->
                </p>
                <p>订单号码：<span>{{item.serial_number}}</span></p>
                <p>下单时间：<span>{{item.create_time}}</span></p>
                <p>联系电话：<span>{{item.phone}}</span></p>
              </div>
              <div class="bottom">
                <div class="left">合计：<span>￥{{item.price}}</span></div>
                <div class="right">
                  <van-button class="bottom1" type="default" @click="bindCancel(item.orderId)" v-if="item.shipping_state===3">取消订单</van-button>
                  <van-button class="bottom2" plain type="primary" v-if="item.shipping_state===3" @click="toWxPay(item.orderId)">确认订单</van-button>
                  <van-button class="bottom3" plain type="danger" v-if="item.shipping_state==0" @click="toWxPay(item)">立即支付</van-button>
                  <p class="bottom4" v-if="item.shipping_state==8">订单已取消，退款中...</p>
                  <p  class="bottom5" v-if="item.shipping_state==7">退款完成</p>
                  <van-button class="bottom2" plain type="primary" v-if="item.shipping_state==5">立即评价</van-button>

                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-list>
      </van-pull-refresh>
    </div>
  </div>


</template>

<script>
  import { Dialog } from 'vant';
  export default {
    name: "MyRecord",
    data() {
      return {
        pageSize:10,//每页数量
        pageNum: 1,//页码
        status:0,
        dataList:[],
        dataListData:[],
        active:0,
        //下拉刷新
        isLoading: false,
        //上拉加载
        loading: false,
        finished: false,
        text:'',
      }
    },
    inject:['reload'],
    created:function () {

    },
    mounted: function () {
      let current=sessionStorage.getItem('userRecord');
      if(current){
        this.active=parseInt(current);
      }else{
        this.active=0;
      };
      this.selectOrder()
    },
    methods: {
      //返回
      onClickLeft() {
        this.$router.go(-1);
      },
      //下拉刷新
      onRefresh() {
        this.selectOrder()
      },
      //上拉加载
      onLoad() {
        if (this.dataList.list && this.dataList.list.length > 0) {
          this.selectOrder();
        }
      },
      async selectOrder(index,title){
        if(this.active==0){
          this.status=0;
        }else if(this.active==1){
          this.status=3;
        }else if(this.active==2){
          this.status=102;
        }else if(this.active==3){
          this.status=5;
        }
        let params={
            pageSize:this.pageSize,
            pageNum:this.pageNum,
            status:this.status,
            orderType:'6,8,9,10',
        };
        var that=this;
        const res = await this.$axios.post(this.$api.myRecordList, params);
          if(res.success){
            if (this.loading) {
              that.dataListData = that.dataListData.concat(res.data.list);
              that.dataList=res.data;
              console.log(that.dataList)
              that.dataList.list = this.dataListData;
              if (that.dataList.list.length >= that.dataList.total) {
                that.finished = true;
              } else {
                that.pageNum++;
              }
            } else {
              that.dataList=res.data;
              if (that.dataList.list.length >= that.dataList.total) {
                that.finished = true;
                that.text='没有更多了'
              }
            }
            that.isLoading = false;
            that.loading = false;
          }else {
            that.dataList=[]
            that.$toast(res.msg);
        }
      },
      ellipsis (value) {
        if (!value) return ''
        if (value.length > 12) {
          return value.slice(0,12) + '...'
        }
        return value
      },
      zellipsis (value) {
        if (!value) return ''
        if (value.length > 16) {
          return value.slice(0,8) + '...'+value.slice(-8)
        }
        return value
      },
      bindCancel(orderId){
        var that=this;
        Dialog.confirm({
          title: '确认取消订单？',
        }).then(() => {
          let params={
            orderId :orderId,
            state :"102"
          };
          let result=that.$axios.post(that.$api.orderStatus,params);
          result.then(res=>{
            if(res.success){
              Dialog.alert({
                title: '订单取消成功',
                message: '已取消'
              }).then(() => {
                // on close
                that.reload();
              });
            }else{
              Dialog.alert({
                title: '订单取消失败',
              }).then(() => {
                // on close
                that.reload();
              });
            }
          })
        }).catch(() => {
          Dialog.alert({
            title: '订单取消失败',
          }).then(() => {
            // on close
            that.reload();
          });
        });
      },
      bindCheck(){
        var that=this;
        Dialog.confirm({
          title: '已经收到商品？',
          message: '确认收货后费用将直接进入商家账户'
        }).then(() => {
          let params={
            orderId :orderId,
            state :"5"
          };
          let result=that.$axios.post(that.$api.orderStatus,params);
          result.then(res=>{
            if(res.success){
              Dialog.alert({
                title: '订单取消成功',
                message: '已取消'
              }).then(() => {
                // on close
                that.reload();
              });
            }else{
              Dialog.alert({
                title: '订单取消失败',
              }).then(() => {
                // on close
                that.reload();
              });
            }
          })
        }).catch(() => {
          Dialog.alert({
            title: '订单取消失败',
          }).then(() => {
            // on close
            that.reload();
          });

        });
      },
      //跳转订单详情页
      toFarmIndex(orderDetailId) {
        this.$router.push({path: "./orderDetail", query: {id: orderDetailId}});
      },
      //跳转支付详情页
      toWxPay(item) {
        this.$router.push({path: "./wxPay", query: {order_id: item.id}});
      }
    },
  }

</script>

<style scoped>
  .my_con{margin-top: 0.44rem;}
  .list {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 2.55rem);
  }
  .list li {
    width: 100%;
    background: #fff;
    padding: 0 0.15rem;
    margin-bottom: 0.08rem;
  }
  .recordDetails_con_head{line-height: 0.47rem;overflow: hidden;border-bottom: 1px solid #f7f7f7;}
  .recordDetails_con_head img{float: left;margin-top:0.11rem;width: 0.25rem;height: 0.25rem;margin-right: 0.13rem;border-radius: 1rem;}
  .recordDetails_con_head_span{color: #000;width: 75%;float: left;font-size: 0.14rem;}
  .recordDetails_con_head div{float: right;width: 10%;}
  .recordDetails_con_head div i{font-size: 0.16rem;padding: 0.155rem 0;float: right;}
  .recordDetails_con_con{overflow: hidden;border-bottom: 1px solid #f7f7f7;}
  .recordDetails_con_con_img{float: left;margin-top:0.1rem;width: 25.45%;height: 0.7rem;margin-right: 0.15rem;}
  .recordDetails_con_con_img img{border-radius: 0.1rem;width: 100%;height: 100%;}
  .recordDetails_con_con_title{float: left;width: 68%;padding: 0.1rem 0 }
  .recordDetails_con_con_title p{font-size: 0.15rem;color: #000;padding-bottom: 0.1rem;}
  .recordDetails_con_con_title span:nth-child(2){color: #ff202f;font-size: 0.11rem;}
  .recordDetails_con_con_title span:nth-child(3){color: #000;font-size: 0.15rem;float: right;}
  .recordDetails_con_foot{padding: 0.15rem 0;}
  .recordDetails_con_foot p{font-size: 0.13rem;color: #808080;line-height: 0.2rem;}
  .recordDetails_con_foot p span{font-size: 0.13rem;color: #000;}
  .list .bottom{
    width: 100%;
    height:40px;
    line-height: 40px;
    border-top: 1px solid #f7f7f7;
  }
  .list .bottom .left{
    float:left;
  }
  .list .bottom .left span{
    color: red;
    font-size: 0.16rem;
  }
  .list .bottom .right{
    float:right;
  }

  .list .bottom button{
    margin-top: 0.07rem;
    height: 26px;
    line-height:26px;
    border-radius:0.05rem ;
  }
  .bottom1{
    color: #8c8c8c;
  }
  .bottom2{
    color:#01bf47;
    border: 1px solid #01bf47;
  }
  .bottom4{
    color:red;
    text-align: right;
  }
  .bottom5{
    color:#8c8c8c;
    text-align: right;
  }
  .van-tabs__nav--card{
    margin: 0;
  }
  .van-tabs {
    position: fixed;
    top:0;
    z-index: 100;
    width: 100%;
  }
</style>
